<template>
	<wsPage title="规格参数列表">
		<div slot="page_operate">
			<Button  @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query"  @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="名称">
			            <Input v-model="queryForm.name" placeholder="请输入"></Input>
			        </FormItem>
			        <FormItem label="编码">
			            <Input v-model="queryForm.code" placeholder="请输入"></Input>
			        </FormItem>
			        <!--<FormItem label="类别">
			            <Select clearable v-model="queryForm.type" placeholder="请选择" class="ws-form-select">
			                <Option value="1">规格</Option>
			                <Option value="2">参数</Option>
			            </Select>
			        </FormItem>-->
			        <FormItem label="输入类型">
			            <Select clearable v-model="queryForm.writeType" placeholder="请选择" class="ws-form-select">
			                <Option value="1">文本</Option>
			                <Option value="2">单选</Option>
			                <Option value="2">多选</Option>
			            </Select>
			        </FormItem>
				</Form>
			</div>
			<div slot="list_operate">
				<Button  @click="showAddModal">新增规格参数</Button>
			</div>
			<div slot="list_data">
				<ws-table :data="table.data" style="width: 100%">
					<ws-table-column align="center" prop="name" label="名称"></ws-table-column>
					<ws-table-column align="center" prop="code" label="CODE"></ws-table-column>
					<ws-table-column align="center" prop="type" label="类型">
						<template slot-scope="scope">
							<Tag v-if="scope.row.type == 1" color="blue">规格</Tag>
							<Tag v-if="scope.row.type == 2" color="green">参数</Tag>
      					</template>
					</ws-table-column>
					<ws-table-column align="center" prop="writeType" label="参数项" width="160">
						<template slot-scope="scope">
							<div class="ivu-tag ivu-tag-checked" :class="{'ivu-tag-default' : scope.row.writeType == 1, 'ivu-tag-green' : scope.row.writeType == 2, 'ivu-tag-blue' : scope.row.writeType == 3}" @click="showPropertyValues(scope.row)">
								<span class="ivu-tag-text" :class="{'ivu-tag-color-white': scope.row.writeType != 1}">{{scope.row.writeType == 1 ? '文本' : (scope.row.writeType == 2 ? '单选' : '多选')}}</span>
							</div>
      					</template>
					</ws-table-column>
					<ws-table-column align="center" prop="wDesc" label="描述" min-width="150"></ws-table-column>
					<ws-table-column align="center" width="120" label="操作">
						<template slot-scope="scope">
							<Button @click="showEditModal(scope.row)" type="text" size="small">编辑</Button>
							<Button @click="showTransModal(scope.row)" type="text" size="small">翻译</Button>
      					</template>
					</ws-table-column>
				</ws-table>
			</div>
		</wsSmPanel>
		
		<!--新增属性弹框-->
		<wsModal v-model="modal.show" ok-text="保存" :title="modal.title"  @on-ok="modalSave"  @on-cancel="modalCancel">
		    <Form ref="modalForm" :model="modal.form" :rules="modal.validate" :label-width="100">
		        <FormItem label="名称" prop="name">
		            <Input v-model="modal.form.name" autofocus></Input>
		        </FormItem>
		        <FormItem label="CODE" prop="code">
		            <Input v-model="modal.form.code"></Input>
		        </FormItem>
		        <FormItem label="描述" prop="wDesc">
		            <Input v-model="modal.form.wDesc"></Input>
		        </FormItem>
		        <!--<FormItem label="类别" prop="type">
		            <Select  v-model="modal.form.type" placeholder="请选择" @on-change="changeTypeEvent">
		                <Option :value="1">规格</Option>
		                <Option :value="2">参数</Option>
		            </Select>
		        </FormItem>-->
		        <FormItem label="输入类型" prop="writeType">
		            <Select  v-model="modal.form.writeType" placeholder="请选择" :disabled="modal.form.type == 1" style="width: 290px;">
		                <Option :value="1">文本</Option>
		                <Option :value="2">单选</Option>
		                <Option :value="3">多选</Option>
		            </Select>
		            <Button @click="showParamItems" :disabled="modal.form.writeType == 1">添加参数项</Button>
		        </FormItem>
		    </Form>			
		</wsModal>	
		<!--新增属性弹框-->
		<wsModal v-model="modal1.show" ok-text="保存" :title="modal1.title"   :hide-footer="true"  @on-cancel="modal1Cancel">
			<div>
				<Row class="title-row">
					<Col span="12" style="padding-right:10px">
			            <Input v-model="modal1.form.value" autofocus></Input>
			        </Col>
			        <Col span="12" style="padding-right:10px">
			        	<Button @click="addTag">添加</Button>
			        </Col>
			    </Row>
				<Tag v-for="item in modal1.table.data" type="dot" :key="item" :name="item" closable @on-close="closeTag">{{item}}</Tag>
			</div>			    		
		</wsModal>

		<!--翻译弹框-->
		<wsModal v-model="modal3.show" ok-text="保存" :title="modal3.title"  @on-ok="modal3Save()"  @on-cancel="modal3Cancel">
		    <Form ref="modalForm" :model="modal3.form" :label-width="100">

		        <FormItem label="语言" prop="languageCode">
		            <Select  v-model="modal3.form.languageCode" placeholder="请选择" filterable
            		remote
            	    :remote-method="getPropertyTranslate"
            		:loading="loading2" style="width: 290px;">
		                <Option value="en">英语</Option>
		                <Option value="it">意大利语</Option>
		            </Select>
		        </FormItem>
				<FormItem label="名称" prop="name">
		            <Input v-model="modal.form.name" autofocus></Input>
		        </FormItem>
		        <FormItem label="名称翻译" prop="transName">
		            <Input v-model="modal3.form.transName"></Input>
		        </FormItem>
				<FormItem label="CODE" prop="code">
		            <Input v-model="modal.form.code" autofocus></Input>
		        </FormItem>
				<FormItem label="CODE翻译" prop="transName">
		            <Input v-model="modal3.form.transCode"></Input>
		        </FormItem>
		    </Form>			
		</wsModal>	

		<!--规格参数值列表-->
		<wsModal v-model="modal2.show" :title="modal2.title"   :hide-footer="true">
			<div>
				<Tag v-for="item in modal2.table.data" type="dot" :key="item" :name="item">{{item}}</Tag>
			</div>			    		
		</wsModal>			
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	import Common from '../../../common/common.js';
	export default {
		data() {
			return {
				//条件查询
				queryForm: {
					name: '',
					type:'',
					code: '',
					writeType: ''
				},
				table: {
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				},
				//新增属性弹框
				modal: {
					title: '新增规格参数',
					show: false,
					form: {
						id:null,
						name: '',
						writeType: 3,
						type: 1,
						code: '',
						wDesc: ''
					},
					validate: {
						name: [
	                        { required: true, message: '名称不能为空', trigger: 'blur' }
	                    ],
	                    writeType: [
	                        { required: true, message: '请选择填写类别'}
	                    ],
	                    type: [
	                        { required: true, message: '请选择规格参数类别' }
	                    ],
	                    code: [
	                        { required: true, message: 'CODE不能为空', trigger: 'blur' }
	                    ]
					}
				},
				modal1: {
					show: false,
					title: '维护参数项',
					form: {
						value: ''
					},
					table: {
						data: []
					}
				},
				modal2: {
					show: false,
					title: '规格参数值',
					table: {
						data: []
					}
				},
				modal3: {
					show: false,
					title: '规格翻译',
					form:{
						id:null,
						transName:'',
						transCode:'',
						languageCode:''
					}
				}
			}
		},
		computed: {
			isEdit() {
		      return !Util.vad.isBlank(this.modal.form.id);
		    }
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.query();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.get('/ws/ops/v2/propertys/' + pageSize + '/' + pageNum, {params: this.queryForm}).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},	
			
			//刷新重置查询
			refresh(){
				this.queryForm.name = '';
				this.queryForm.type = '';
				this.queryForm.code = '';
				this.queryForm.writeType = '';
				this.table.data = [];
				this.table.page.total = 0;
				this.table.page.pageNum = 1; //当前页
				this.table.page.pageSize = 10; //每页显示条数
				this.query();
			},
            /**
			 * 打开新增模态框
			 */
			showAddModal(){
				this.modal.title='新增规格参数';
				this.modal.show = true;
			},
			/**
			 * 充值弹框表单
			 */
			resetModalForm() {
				this.$refs['modalForm'].resetFields();
				this.modal.form.id = null;
				this.modal.form.name = null;
				this.modal.form.code = null;
				this.modal.form.wDesc = null;
				this.modal.form.writeType =  3;
				this.modal.form.type = 1;
				
				this.modal1.table.data = [];
				this.modal1.form.value = '';
			},
			/**
			 * 模态框保存
			 */
			modalSave() {
				this.$refs['modalForm'].validate((valid) => {
					if (valid) {
						//如果当前为非文本，就必须设置参数值
						if(1 != this.modal.form.writeType) {
							let datas = this.modal1.table.data;
							if(datas.length == 0) {
								this.$Message.info('必须设置参数值');
								return;
							}
						} else {
							this.modal1.table.data = [];
						}
                        this.submitModal();
                    } 
               });
			},
			/**
			 * 提交模态框事件
			 */
			submitModal() {
				if(this.isEdit) {
					this.editModal();
				} else {
					this.saveModal();
				}
			},
			/**
			 * 保存模态框
			 */
			saveModal() {
				let postData_ = this.modal.form;
				const _this = this;
				let values_ = this.modal1.table.data;
				this.axios.post('/ws/ops/v2/property', {
					page: postData_,
					values: values_
				}).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('新增规格参数成功');
						_this.modalCancel();
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('新增规格参数失败:' + message_);
					}
				});
			},
			/**
			 * 修改模态框
			 */
			editModal() {
				let postData_ = this.modal.form;
				let values_ = this.modal1.table.data;
				const _this = this;
				this.axios.put('/ws/ops/v2/property', {
					page: postData_,
					values: values_
				}).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('修改规格参数成功');
						_this.modalCancel();
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('修改规格参数失败:' + message_);
					}
				});
			},
			/**
			 * 模态框取消
			 */
			modalCancel() {
				this.resetModalForm();
				this.modal.show = false;
			},
            /**
			 * 打开新增模态框
			 */
			showEditModal(rowData){
				this.modal.title='修改规格参数';
				this.initModalData(rowData.id);
			},
			/**
			 * 初始化模态框数据
			 */
			initModalData(propertyId) {
				let _this = this;
				this.axios.get('/ws/ops/v2/property/' + propertyId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildModalData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建模态框的图片
			 */
			buildModalData(data) {
				let property = data.page;
				let values = data.values;
				this.modal.form.id = property.id;
				this.modal.form.name = property.name;
				this.modal.form.code = property.code;
				this.modal.form.wDesc = property.wDesc;
				this.modal.form.writeType =  property.writeType;
				this.modal.form.type = property.type;
				
				this.modal1.table.data = values;
				
				this.modal.show = true;
			},
			changeTypeEvent(value) {
				if(1 == value) {
					this.modal.form.writeType = 3;
				}
			},
			showParamItems() {
				this.modal1.show = true;
			},
			/**
			 * 删除标签
			 */
			closeTag(event, name) {
				let datas = this.modal1.table.data;
				let index = datas.indexOf(name);
				datas.splice(index, 1);
			},
			/**
			 * 添加标签
			 */
			addTag() {
				let tagValue = this.modal1.form.value;
				tagValue = Util.trim(tagValue);
				if(Util.vad.isBlank(tagValue)) {
					return;
				}
				let datas = this.modal1.table.data;
				let index = datas.indexOf(tagValue);
				if(index == -1) {
					datas.push(tagValue);
				}
			},
			/**
			 * 显示规格参数信息
			 */
			showPropertyValues(row_) {
				let propertyId = row_.id;
				if(row_.writeType == 1) {
					return;
				}
				let _this = this;
				this.axios.get('/ws/ops/v2/property/' + propertyId + '/value').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.modal2.table.data = res.data;
						_this.modal2.show = true;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 设置参数值取消
			 */
			modal1Cancel() {
				this.modal1.form.value = '';
			},

			showTransModal(row_){
				this.modal3.title='规格参数翻译';
				this.modal3.show = true;
				this.modal.form.name = row_.name;
				this.modal.form.code = row_.code;
				this.modal3.form.id = row_.id;
			},

			modal3Save(){
				let postData_ = this.modal3.form;
				let _this = this;
				this.axios.post('/ws/ops/v2/property/translate', postData_).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						this.modal3Cancel();
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},

			modal3Cancel(){
				this.modal3.show = false;
				this.modal3.form.transName = '';
				this.modal3.form.transCode = '';
				this.modal3.form.languageCode = '';
			},

			getPropertyTranslate(){
				let _this = this;
				let propertyId = _this.modal3.form.id;
				let languageCode = _this.modal3.form.languageCode;
				this.axios.get('/ws/ops/v2/property/translate'+ '/'+ propertyId + '/' +languageCode).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						if(res.data != null){
							this.modal3.form.transName = res.data.name;
							this.modal3.form.transCode = res.data.code;
						}else{
							this.modal3.form.transName = '';
							this.modal3.form.transCode = '';
						}
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			}
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
	.title-row {
		padding: 10px;
	}
</style>